<script>
const app = getApp();
export default {
  name: "td-orders",
  props: {
    taskOrderList: {
      type: Array,
      default: [],
    },
    source: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,

      order_id: "",
      more: false,

      order_item: {
        package: {
          images: []
        },
        shop: {
          name: ''
        },
        package_name: ''
      },
      goodsImage: [],//页面大图的ref索引

    }
  },
  mounted() {
    console.log('订单路径类型==', this.source)
  },
  methods: {

    // 查看素材详情
    gotoMaskDetailFun(taskId, signId){
      uni.navigateTo({
        url: '/pages_reward/pages/reward_detail/reward_detail?taskId=' + taskId + "&signId=" + signId + '&downloadAssetProcessBtn=true'
      })
    },
    // 取消任务报名
    cancelOrderFun(id){
      this.$emit('cancelTaskOrderFun', id)
    },
    // 重新报名
    reSignUpFun(taskId){
      uni.navigateTo({
        url: '/pages_reward/pages/reward_detail/reward_detail?taskId=' + taskId
      })
    },
    // 浏览其他任务
    gotoRewardListFun(){
      uni.reLaunch({
        url: '/pages/reward/reward'
      })
    },
    // 上传笔记、重新上传笔记
    uploadNoteFun(res) {
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) +  '&source=' + this.source + '&taskSource=taskOrder'
      })
    },
    // 复制订单号
    copy_no(order_no) {
      uni.setClipboardData({
        data: order_no, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      // 已报名，待上传笔记7
      if (item.status == 7){
        let endTime = new Date(item.expiry_date).getTime()
        let isend = endTime - now > 0 ? (endTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      //待到店使用倒计时
      else if (item.status == 2) {
        let invalidTime = new Date(item.invalid_date).getTime()
        let isend = invalidTime - now > 0 ? (invalidTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 待上传笔记倒计时
      else if (item.status == 3) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 驳回倒计时
      else if (item.status == -2) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
    },

    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/pages/orders/orders_gf'
      })
      console.log('倒计时结束')
    },
  },
}
</script>

<template>
<view class="orders-box">
  <view class="order_list_item" v-for="(item,index) in taskOrderList" :key="index">
    <view class="order_title u-flex">
      <view class="shop_title u-flex" @click="copy_no(item.order_num)">
        <text class="text-Omit">订单号：</text>
        <text class="text-Omit">{{ item.order_num }}</text>
        <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx"></image>
      </view>
      <view class="status">
        <!--
          1=>'待审核',
          2=>'审核不通过',
          3=>'已取消',
          4=>'任务失败',
          5=>'待下载素材',
          6=>'待下单',
          7=>'待上传',
          8=>'待审核笔记',
          9=>'驳回可提交',
          10=>'驳回不可提交',
          11=>'笔记通过',
          12=>'待返款',
          13=>'已返款',
          100=>'完成',
        -->
        <text class="color1" v-if="item.status === 1">已报名，待审核</text>
        <text class="color3" v-if="item.status === 2">账号暂未通过审核</text>
        <text class="color1" v-if="item.status === 3">已取消</text>
        <text class="color3" v-if="item.status === 4">任务失败</text>
        <text class="color3" v-if="item.status === 5">待下载素材</text>
        <text class="color1" v-if="item.status === 6">已审核，待下单</text>
        <text class="color1" v-if="item.status === 7">待上传笔记</text>
        <text class="color1" v-if="item.status === 8">待审核笔记</text>
        <text class="color1" v-if="item.status === 9">驳回可提交</text>
        <text class="color3" v-if="item.status === 10">驳回不可提交</text>
        <text class="color1" v-if="item.status === 11">笔记通过</text>
        <text class="color1" v-if="item.status === 12">待返款</text>
        <text class="color1" v-if="item.status === 13">已返款</text>
        <text class="color1" v-if="item.status === 100">完成</text>
      </view>
    </view>
    <view style="padding: 20rpx 0"><u-line color="#F3F3F3"></u-line></view>
    <view class="goods_info u-flex">
      <view @click="goShopDetails(item)" class="goods_img" style="margin-top: 0">
        <image :ref="goodsImage[index]" :src="item.logo" mode="aspectFill" class="goods_img_img"></image>
      </view>
      <view class="goods_name">
        <view @click="goShopDetails(item)">
          <view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;">
            <view class="ellipsis-one-line" style="flex: 1;">
              <text style="font-size: 28rpx;color: #3D3D3D;margin-left: 10rpx;">{{ item.shop_name }}</text>
            </view>
            <!--<u-icon name="arrow-right" size="24" color="#AAAAAA" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon>-->
          </view>
          <view class="goods_warp u-flex" style="justify-content: space-between;">
            <view class="rewar_item_platform">
              <view v-for="(itemPlat, indexPlat) in item.note_platforms" :key="indexPlat" class="reward_item_platform_item">
                <view class="platform_item_img"><image :src="itemPlat.image" mode="widthFix" style="width: 100%"></image></view>
                <view class="platform_item_name">
                  {{itemPlat.title}}
                  <text v-if="itemPlat.platformType === 1">(粉丝数≥{{ itemPlat.apply_condition.xhs_fansNum }}）</text>
                  <text v-if="itemPlat.platformType === 2">(粉丝数≥{{ itemPlat.apply_condition.dy_fansNum }}）</text>
                  <text v-if="itemPlat.platformType === 3">LV{{ itemPlat.apply_condition.dz_Level }}</text>
                  <text v-if="itemPlat.platformType === 4">LV{{ itemPlat.apply_condition.mt_Level }}</text>
                </view>
              </view>
              <view class="platform_item_commission" style="color: #FF5F15;font-size: 24rpx;">
                <text>赏金:￥</text>
                <text style="font-size: 36rpx">{{ item.reward_amount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="order_tip" v-if="item.status !== 1 && item.status !== 2 && item.status !== 3 && item.status !== 4"
      :style="{background: item.status === 3 || item.status === 5 || item.status === 6 || item.status === 9 || item.status === 10 || item.status === 11 || item.status === 12 || item.status === 13 || item.status === 100 ? '#FFF8E8' : ''}">
      <!--已报名，待发布笔记提示 v-if="item.status === 1"-->
      <view  class="order_tip_warp u-flex">
        <view class="order_tip_warp_left">
          <!--已报名，待发布笔记1-->
          <view v-if="item.task_type === 1 && (item.status === 5 || item.status === 7)" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 28rpx;">任务图片及文案素材</view>
          <view v-if="item.task_type === 2 && item.status === 7" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 28rpx;">您已下单，请在规定时间内完成上传笔记，否则将无法领取赏金！</view>
          <!--已审核，待下单-->
          <view v-if="item.status === 6" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 28rpx;">商家已审核，请尽快下单！</view>
          <!--已上传，待审核8-->
          <view v-if="item.status === 8" class="order_tip_warp_left_text" style="color: #333333;font-size: 24rpx;">平台将在24小时内审核完成，请耐心等待！</view>
          <!--驳回可提交9-->
          <view v-if="item.status === 9" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 24rpx;">驳回理由：{{ item.audit_opinion }}</view>
          <!--普通待返款-->
          <view v-if="item.status === 12" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 24rpx;">待返款金额：{{ item.reward_amount }}</view>
          <!--达人待返款-->
          <!--<view v-if="item.status === 12 && item.task_type === 2" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 24rpx;">待返款金额：{{ Number(item.commission) + Number(item.reward_amount) }}</view>-->
          <!--已完成-->
          <view v-if="item.status === 100" class="order_tip_warp_left_text" style="color: #FF5429;font-size: 24rpx;">已返款金额：{{ item.reward_amount }}</view>
        </view>
        <!--已报名，待发布笔记1-->
        <view v-if="item.task_type === 1 && (item.status === 5 || item.status === 7)" class="order_tip_warp_right">
          <view @click="gotoMaskDetailFun(item.task_id, item.id)" class="order_tip_warp_btn">查看素材</view>
        </view>
      </view>
    </view>
    <!--底部内容-->
    <view class="order_foot_btn u-flex">
      <view class="order_foot_btn_left">
        <view v-if="item.status !== 3" class="order_foot_btn_left_text" style="padding-bottom: 10rpx">
          <text>报名时间：</text>
          <text>{{ item.create_time }}</text>
        </view>
        <!--已报名，待上传笔记7-->
        <view v-if="item.status === 7" class="count_down" >
          请在
          <u-count-down
              :timestamp="findcountdown(item)"
              @end="countDownEndFun"
              :show-days="true"
              :show-border="true"
              font-size="24"
              color="#FFFFFF"
              bgColor="#FF7900"
              border-color="#ffffff"
              separator="zh"
              separator-size="20"
              separator-color="#FF7900">
          </u-count-down>
          <text>内上传笔记凭证</text>
        </view>
      </view>
      <view class="order_foot_btn_right">
        <!--已报名，待发布笔记1 -->
        <view class="kongxin" @click="cancelOrderFun(item.id)" v-if="item.status === 1 || item.status === 5 || item.status === 6">取消订单</view>
        <!--已报名，待上传笔记7-->
        <view class="solid" @click="uploadNoteFun(item)" v-if="item.status === 7">上传笔记凭证</view>
        <!--已报名，待下单6-->
        <view class="solid" v-if="item.status === 6" @click="reSignUpFun(item.task_id)" style="margin-left: 10rpx;">立即下单</view>
        <!--已上传，待审核8、 笔记通过11 、待返款12 、 已返款13、 已完成100、 -->
        <view class="solid" v-if="item.status === 2 || item.status === 8 || item.status === 10 || item.status === 11 || item.status === 12 || item.status === 13 || item.status === 100" @click="gotoRewardListFun" >浏览其他任务</view>
        <!--已驳回9-->
        <view class="solid" v-if="item.status === 9" @click="uploadNoteFun(item)" >修改上传</view>
        <!--已取消4、 任务失败5、 驳回不可提交10-->
        <view class="solid" v-if="item.status === 3 || item.status === 4" @click="reSignUpFun(item.task_id)" >重新报名</view>
      </view>
    </view>
  </view>


</view>
</template>

<style scoped lang="scss">
/* 电话、导航css */
.info_address_right {
  width: 200rpx;
  height: 80rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 20rpx;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  .right_1 {
    text-align: center;
    flex: 1;
    padding: 0 10rpx;

    image {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 6rpx;
    }

    color: $zzy-text-color-666666;
    font-size: 22rpx;
  }
}
/* 平台样式 */
.rewar_item_platform{
  .reward_item_platform_item{
    display: flex;
    align-items: center;
    padding-bottom: 10rpx;
    .platform_item_img{
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .platform_item_name{
      margin-left: 10rpx;
      font-size: 24rpx;
      color: #666666;
      line-height: 34rpx;
    }
  }
  .platform_item_commission{
    font-size: 24rpx;
    color: #FF5F15;
  }
}
/* 提示内容css */
.order_tip{
  line-height: 40rpx;
  background-color: #f9f9f9;
  font-size: 24rpx;
  color: #3d3d3d;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  .order_tip_warp {
    justify-content: space-between;
    align-items: center;
    .order_tip_warp_left {
      flex: 1;
      .order_tip_warp_left_text {
        font-size: 28rpx;
      }
      .count_down{
        color: #666666;
        font-size: 24rpx;
        padding: 10rpx 0;
      }
    }
    .order_tip_warp_right {
      width: 150rpx;
      .order_tip_warp_btn {
        height: 50rpx;
        line-height: 50rpx;
        background: linear-gradient( 104deg, #FF5429 0%, #FF7917 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        color: #FFFFFF;
        font-size: 26rpx;
        padding: 0 20rpx;
      }
    }
  }
}

/* 底部内容css */
.order_foot_btn{
  justify-content: space-between;
  .order_foot_btn_left{
    font-size: 24rpx;
    color: #3D3D3D;
  }
  .order_foot_btn_right{
    font-size: 24rpx;
    color: #FF5F15;
    display: flex;
    align-items: center;
    .kongxin{
      border-radius: 200rpx;
      padding: 0 20rpx;
      height: 68rpx;
      line-height: 68rpx;
      border: 2rpx solid #E2E2E2;
      color: #666666;
      text-align: center;
      font-size: 26rpx;
    }
    .solid{
      height: 68rpx;
      line-height: 68rpx;
      font-size: 26rpx;
      color: #FFFFFF;
      text-align: center;
      padding: 0 30rpx;
      background: linear-gradient( 270deg, #FF5429 0%, #FF7917 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
</style>